/*
 * @Author: your name
 * @Date: 2021-12-10 16:33:53
 * @LastEditTime: 2021-12-15 16:45:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geek-admin-test\src\utils\useTodos.js
 */
import {reactive ,ref,computed} from 'vue'
export  function useTodos() {

    let animate = reactive({
        show: false,
        el: null
      })
      function beforeEnter(el) {
        let dom = animate.el
        let rect = dom.getBoundingClientRect()
        let x = window.innerWidth - rect.left - 60
        let y = rect.top - 10
        el.style.transform = `translate(-${x}px, ${y}px)`
      }
      function enter(el, done) {
        document.body.offsetHeight
        el.style.transform = `translate(0,0)`
        el.addEventListener('transitionend', done)
      }
      function afterEnter(el) {
        animate.show = false
        el.style.display = 'none'
      }

    let title = ref("");
    let todos = ref([{ title: '学习 Vue 3', done: true }, { title: '睡觉', done: false }, { title: '玩游戏', done: false }]);
let showModal = ref(false);

    function addTodo() {
        if(!title.value){
            showModal.value = true
            setTimeout(() => {
                showModal.value = false
            }, 1500);
            return
        }
      todos.value.push({
        title: title.value,
        done: false,
      });
      title.value = "";
    }
    function clear() {
      todos.value = todos.value.filter((v) => !v.done);
    }
    function removeTodo(e, i) {
        animate.el = e.target
        animate.show = true
        todos.value.splice(i, 1)
      }
    let active = computed(() => {
      return todos.value.filter((v) => !v.done).length;
    });
    let all = computed(() => todos.value.length);
    let allDone = computed({
      get: function () {
        return active.value === 0;
      },
      set: function (value) {
        todos.value.forEach((todo) => {
          todo.done = value;
        });
      },
    });
    return { animate,beforeEnter,enter,afterEnter,showModal, title, todos, addTodo, clear,removeTodo, active, all, allDone };
  }